<template>
    <div class="project_user_item">
        <!-- :class="{'man' : icon == '♂','woman' : icon == '♀'}" -->
        <div class="icon">
            <img :src="headerImageKeyMapping[projectUser.avatar]" alt="">
        </div>
        <div class="nickname">{{projectUser.nickname}}</div>
        <div class="permission" v-if="!isRoot">
            <span :class="{'man' : icon == '♂','woman' : icon == '♀'}">{{ projectUser.gender == '0' ? '♀' : '♂' }}</span>
            {{permission}}
        </div>
        <div class="permission" v-if="isRoot && permission == '管理员'">
            <span :class="{'man' : icon == '♂','woman' : icon == '♀'}">{{ projectUser.gender == '0' ? '♀' : '♂' }}</span>
            {{permission}}
        </div>
        <el-dropdown v-if="isRoot && permission != '管理员'" class="permission" @command="choosePremission">
            <span class="el-dropdown-link">
                <span :class="{'man' : icon == '♂','woman' : icon == '♀'}">{{ projectUser.gender == '0' ? '♀' : '♂' }}</span>
                <span class="canChange">{{permission}}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="editor" v-if="permission == '参与者'">开发者</el-dropdown-item>
                <el-dropdown-item command="watcher" v-if="permission == '开发者'">参与者</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div class="deleteBox" v-if="isRoot && permission != '管理员'" @click="deleteUser">
            <el-button style="color:#F56C6C" icon="el-icon-delete" type="text"></el-button>
        </div>
        <div class="checkAns" v-if="checkShowStatus" :class="{'show' : checkShowStatus}">
            <div class="checkAnsBackground" :class="{'show' :checkShowClassStatus}">
                <span>{{ checkType == 'deleteUser' ? '是否删除该用户？' : '是否更改用户权限？'}}</span>
                <div class="checkButton" style="background:#67C23A" @click="confirm"><i class="el-icon-check"></i></div>
                <div class="checkButton" style="background:#F56C6C" @click="cancel"><i class="el-icon-close"></i></div>
            </div>
        </div>
        
    </div>
</template>
<script>
import headerImageKeyMapping from '../../../assets/headerImageMapping'

export default {
    props: ['projectUser', 'isRoot', 'getProjectUser'],
    data() {
        return {
            checkType: '',
            checkShowStatus: false,
            checkShowClassStatus: false,
            icon: '',
            permission: '',
            headerImageKeyMapping: headerImageKeyMapping,
            changePremissionValue: '',
        }
    },
    mounted() {
        this.icon = (this.projectUser.gender == '0' ? '♀' : '♂');
        switch (this.projectUser.permission) {
            case 'admin':
                this.permission = '管理员';
                break;
            case 'editor':
                this.permission = '开发者';
                break;
            case 'watcher':
                this.permission = '参与者';
                break;
        };
    },
    methods: {
        confirm() {
            if (this.checkType == 'changePremission') {
                window.action.project.upDataProjectUserPermission({
                    id: this.projectUser.projectUserId,
                    permission: (this.projectUser.permission == 'editor' ? 'watcher' : 'editor')
                }).then((res) => {
                    this.cancel();
                    this.getProjectUser();
                });
            } else {
                window.action.project.deleteProjectUserPermission(this.projectUser.projectUserId).then((res) => {
                    this.cancel();
                    this.getProjectUser();
                });
            };
        },
        cancel() {
            this.checkShowClassStatus = false;
            setTimeout(() => {
                this.checkShowStatus = false;
                this.checkType = '';
            }, 310);
        },
        deleteUser() {
            this.checkShowStatus = true;
            this.checkType = 'deleteUser';
            setTimeout(() => {
                this.checkShowClassStatus = true;
            }, 10);
        },
        choosePremission(value) {
            this.checkShowStatus = true;
            this.changePremissionValue = value;
            this.checkType = 'changePremission';
            setTimeout(() => {
                this.checkShowClassStatus = true;
            }, 10);
        },
    }
}
</script>
<style scoped>
    .project_user_item { height: 70px; position: relative; overflow: hidden; }
    .project_user_item .icon { width: 60px; height: 60px; position: absolute; top: 5px; left: 10px;  border-radius: 50%; color: #fff; text-align: center; }
    .project_user_item .icon img { display: block; border-radius: 50%; width: 100%;}
    .project_user_item .man { color: #409EFF;}
    .project_user_item .woman { color: #F56C6C;}
    .project_user_item .nickname { position: absolute; left:85px; right: 40px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; font-size: 18px; color: #666; top: 15px;}
    .project_user_item .permission { position: absolute; left:85px; bottom: 10px; cursor: pointer; color: #666;}
    .deleteBox { position: absolute; width: 40px; text-align: center; line-height: 70px; top: 0; right: 0;}
    .checkAns { text-align: center;  position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; }
    .checkAnsBackground {transition: all 0.2s; background:rgba(0, 0, 0, 0.5); height: 100%; border-radius: 15px; opacity: 0;}
    .checkAnsBackground.show { opacity: 1; }
    .checkButton { width: 30px; height: 30px; border-radius: 50%;  transition: all 0.2s; display: inline-block; margin: 30px 5px 0 5px;  cursor: pointer; background: #666; line-height: 30px; color: #fff;}
    .checkAnsBackground.show .checkButton { margin: 15px 5px 0 5px; }
    .checkAnsBackground span {margin: 0; color: #fff; margin: 15px 0 0 0;}
    .canChange { font-size: 16px;}
</style>